<template>
  <d2-container>
    <div class="muse_filter_box">
      <el-form ref="filtersForm" :model="form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="订单号" v-model="form.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input
                placeholder="手机号"
                v-model="form.cellphone"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="filterSearch('filtersForm')"
              >搜索</el-button
            >
            <el-button @click="resetForm('filtersForm')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="muse_table_box">
      <div class="muse_control_box">
        <el-button
          class="muse_float_right"
          type="primary"
          @click="exportExcel()"
          >导出Excel</el-button
        >
      </div>
    </div>
    <div class="muse_table_box">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column fixed type="selection" width="55" />
        <el-table-column prop="_id" label="订单id" />
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            {{
              scope.row.status == 0
                ? "待付款"
                : scope.row.status == 1
                ? "已付款"
                : scope.row.status == 2
                ? "退款"
                : scope.row.status == 3
                ? "退款中"
                : scope.row.status == 4
                ? "已发货"
                : "已退款"
            }}
            <!-- scope.row.status == 5 ? '撤销' : -->
          </template>
        </el-table-column>
        <!-- <el-table-column prop="total" label="总价（元）"/> -->
        <el-table-column prop="totalPoint" label="积分总价" />
        <el-table-column prop="cellphone" label="手机号" />
        <el-table-column prop="shipDate" label="发货时间">
          <template slot-scope="scope">{{
            scope.row.shipDate | date("YYYY-MM-DD HH:mm")
          }}</template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间">
          <template slot-scope="scope">{{
            scope.row.createdAt | date("YYYY-MM-DD HH:mm")
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="$router.push({name: 'logistics', query: {id: scope.row._id}})" type="text" size="small">快递信息</el-button> -->
            <el-button
              v-if="scope.row.status !== 4"
              @click="addLogistic(scope.row._id)"
              type="text"
              size="small"
              >添加物流</el-button
            >
            <el-button @click="editRow(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button
              v-if="
                scope.row.status != -1 &&
                scope.row.status != 5 &&
                scope.row.status != 0
              "
              @click="cancelOrder(scope.row)"
              type="text"
              size="small"
              >撤销</el-button
            >
            <!-- <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="muse_pagination"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.page"
        :page-sizes="paging.pageSizeAry"
        :page-size="paging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
      ></el-pagination>
    </div>
    <el-dialog
      title="添加物流"
      :visible="dialogDataByLogistic"
      :show-close="false"
    >
      <el-form
        ref="detailForm"
        :model="detailForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="物流公司" prop="logisticsCompany">
          <el-input
            placeholder="物流公司"
            v-model="detailForm.logisticsCompany"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="shipmentNumber">
          <el-input
            placeholder="快递单号"
            v-model="detailForm.shipmentNumber"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fnCloseDialogLogistic">取 消</el-button>
        <el-button type="primary" @click="submitLogistic">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import tableMixin from "../mixins/tableMixin";
import {
  getOrderList,
  writeOffVoucher,
  addLogisticsStatus,
  cancelOrder,
  exportProductOrder,
} from "@/api/admin";
import excel from "@/libs/util.excel.js";
export default {
  name: "orderList",
  mixins: [tableMixin],
  data() {
    return {
      form: {
        id: "",
        cellphone: "",
      },
      detailForm: {
        logisticsCompany: "",
        shipmentNumber: "",
      },
      rules: {
        logisticsCompany: [
          { required: true, message: "请输入物流公司", trigger: "blur" },
        ],
        shipmentNumber: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 获取列表数据
    async getTableData(value, type) {
      let params = {
        page:
          type === "page"
            ? value
              ? value
              : this.paging.page
            : this.paging.page,
        pageSize:
          type === "pageSize"
            ? value
              ? value
              : this.paging.pageSize
            : this.paging.pageSize,
      };
      params = Object.assign({}, params, this.form);
      const {
        code,
        data: { total, currentPage, data, pageSize },
      } = await getOrderList(params);
      this.paging.total = total;
      this.paging.pageSize = pageSize;
      this.paging.page = currentPage;
      this.tableData = data;
    },
    // 编辑该行
    editRow(row) {
      this.$router.push({ name: "changeOrder", query: { id: row._id } });
    },
    // 添加数据
    addLogistic(id) {
      this.dialogDataByLogistic = true;
      this.detailForm = {
        order: id,
      };
    },
    // 提交员工信息
    async submitLogistic() {
      const res = await addLogisticsStatus(this.detailForm);
      this.getTableData();
      this.fnCloseDialogLogistic();
    },
    fnCloseDialogLogistic() {
      this.dialogDataByLogistic = false;
      this.detailForm = {};
    },
    // 撤销订单
    cancelOrder(row) {
      this.wrapConfirm(-1, "是否对该订单进行撤销？")
        .then(async () => {
          await cancelOrder({ order: row._id });
          this.getTableData();
        })
        .catch(() => {});
    },

    // 导出excel
    async exportExcel() {
      await exportProductOrder(this.form).then((res) => {
        excel.exportRaw(res.data, "商品订单");
      });
    },
  },
};
</script>

<style scoped>
</style>
